<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="担保客户查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          @change="getData()"
          v-model="params.org_class"
          :options="enumCustomerType"
        ></c-select>
      </el-form-item>
      <el-form-item v-if="isCity">
        <select-address
          v-model="params.address_code"
          auto-top
          :bottom-level="2"
          placeholder="地址查询"
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="放款时间"
          class="form-control-ml"
          v-model="queryDate"
          @select="handleDateQuery"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('十二大产业贷')"
        >
          导出
        </el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button
          icon="el-icon-folder-checked"
          type="primary"
          class="btn-long"
          v-permission="{ scope: 'indoneBI' }"
          @click="handleSubmit"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      ref="table"
      class="table-sm"
      :columns="tableColumns"
      :data="tableData"
    >
      <template v-slot:use="scope">
        <div class="text-truncate" :title="scope.row.funds_use_dir">
          {{ scope.row.funds_use_dir }}
        </div>
      </template>
      <template v-slot:status="scope">
        <div class="status-label" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.statusLabel }}
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <project-view-dialog
      :visible.sync="visible"
      :batch-no="attachNo"
      :tab-name="viewTabName"
      :query-id="queryId"
    ></project-view-dialog>

    <submit-edit-dialog
      :visible.sync="submitVisible"
      @success="handleSubmitSuccess"
      :product-id="productId"
      @dismiss="handleSubmitDismiss"
    ></submit-edit-dialog>
  </div>
</template>
<script>
import {
  baseTableColumns,
  dataAdapter,
  enumCustomerType,
  enumReviewApproval,
  enumReviewStyle,
  parseCascaderDate,
  enumReplaceStatus,
  enumReplaceStatusStyle,
} from '@/bank/views/limit/index'

import ProjectViewDialog from '@/bank/views/business/industry/history/ProjectViewDialog'
import hndTableMixin from '@/bank/views/business/limit/history/mixins'
import SelectAddress from '@/components/select/SelectAddress'
import SelectDateCascader from '@/components/select/SelectDateCascader'
import SubmitEditDialog from '@/bank/views/business/industry/history/submit/SubmitEditDialog'
export default {
  components: {
    ProjectViewDialog,
    SelectAddress,
    SelectDateCascader,
    SubmitEditDialog,
  },
  mixins: [hndTableMixin],
  props: {},
  data() {
    return {
      enumCustomerType,
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        'review_approval.in': '0,9',
        'is_replace.neq': 1,
        // 'datum_status.eq': 1,
        'channel_type.eq': 0,
        'is_rural_dev.eq': 1,
      },
      queryDate: [],
      order: {
        create_time: 'desc',
      },
      tableName: 'datum_one_county_industry',
      tableColumns: [
        ...baseTableColumns,
        {
          attrs: { label: '操作', align: 'center', width: '160px' },
          operations: [
            { name: '查看', event: this.handleView },
            { name: '附件', event: this.handleAttach },
          ],
        },
      ],

      queryId: '',
      attachNo: '',
      viewTabName: 'detail',
      visible: false,
      submitVisible: false,
    }
  },
  computed: {
    isSubmit() {
      return this.user.scopes.includes('indoneBI')
    },
    isCity() {
      return +this.user.orgRegionLever < 3
    },
    bankName() {
      return this.org.orgName || '-'
    },
    bankCode() {
      return this.org.orgCode
    },
    bankType() {
      return this.user.clientOrgClassType
    },
    productId() {
      return this.$route.query.id
    },
  },
  watch: {},
  created() {
    if (this.productId) {
      this.params['project_type_id.eq'] = this.productId
    }
    this.getData()
  },
  mounted() {},
  methods: {
    getParams() {
      return this.isSubmit
        ? {
            ...this.normalParams,
            ...this.params,
          }
        : {
            'import_status.eq': 1,
            'submit_person.eq': this.userId,
            ...this.params,
          }
    },
    dataAdapter(item) {
      dataAdapter(item)
      item.statusLabel = enumReviewApproval[item.review_approval]
      item.statusStyle = enumReviewStyle[item.review_approval]
      item.replaceStatus = enumReplaceStatus[item.is_replace] || ''
      item.replaceStatusStyle = enumReplaceStatusStyle[item.is_replace]
      if (+item.import_status !== 1) {
        item.statusLabel = '项目异常'
        item.statusStyle = 'danger'
      }
      return item
    },
    handleDateQuery(val) {
      const [start, end] = parseCascaderDate(val)
      this.params['create_time.gte'] = start
      this.params['create_time.lte'] = end
      this.getData()
    },
    handleView(row = {}) {
      this.queryId = row.customer_related_id
      this.attachNo = row.project_approval_batch_bank_id || ''
      this.viewTabName = 'detail'
      this.visible = true
    },

    handleAttach(row = {}) {
      this.queryId = row.customer_related_id
      this.attachNo = row.project_approval_batch_bank_id || ''
      this.viewTabName = 'attach'
      this.visible = true
    },
    handleSubmit() {
      this.submitVisible = true
    },
    handleSubmitSuccess() {
      this.submitVisible = false
      this.getData()
      this.$store.dispatch('getTaskCountIndustry', { type: 0, id: this.productId })
    },
    handleSubmitDismiss() {
      this.submitVisible = false
    },
  },
}
</script>
<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
